<template>
  <div class="home_container">
    <!-- <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in dataList" :key="item.key">
        <img :src="item.img" alt>
      </mt-swipe-item>
    </mt-swipe> -->
    <swiper :dataList="dataList" :isFull="isFull"></swiper>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newList">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photoList">
          <span class="mui-icon mui-icon-email">
            <span class="mui-badge">5</span>
          </span>
          <div class="mui-media-body">图片分享</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/shopList">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">商品</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">location</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-search"></span>
          <div class="mui-media-body">Search</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-phone"></span>
          <div class="mui-media-body">Phone</div>
        </a>
      </li>
      
    </ul>
  </div>
</template>

<script>
import swiper from "../subComponent/swiper.vue"
export default {
  data() {
    return {
      isFull:true,
      dataList: [
        {
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555774307830&di=dd848429a75ebf703146f0526c1d1999&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F46%2Fd%2F95.jpg"
        },
        {
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555774307831&di=3549ba61901a417c41673e68f643d6b8&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F161117%2F9-16111G41S9.jpg"
        },
        {
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555775406845&di=479a9a96d0cc7f1c87fb1c2842df135f&imgtype=0&src=http%3A%2F%2Fimage.suning.cn%2Fuimg%2Fsop%2Fcommodity%2F203966441311750332585077_x.jpg"
        }
      ]
    };
  },
  components:{
      "swiper":swiper
  }
};
</script>

<style lang="less" scoped>
.home_container {
 
  .mui-grid-view.mui-grid-9{
      background-color: white
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
      border: 0;
  }
}
</style>

